<template>
  <a-modal class="common-modal" :title="title" :footer="null" :width="500" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="confirmLoading">
      <a-form :model="formState" @validateFields="handleOk" ref="formRef" layout="vertical" class="common-modal-content">
        <a-col :span="24">
          <a-form-item :label="$t('deviceManage.waterLineNo')" name="hangerLineId" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('deviceManage.pleaseSelectWaterLineNo') }]">
            <a-select v-model:value="formState.hangerLineId" allowClear :placeholder="$t('common.pleaseSelect')">
              <a-select-option v-for="item in selectOptions.waterList" :key="item" :value="item.id">{{ item.lineNo}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="$t('hangManage.trackCode')" name="masterTrackNo" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-model:value.trim="formState.masterTrackNo" :disabled="true" :placeholder="$t('deviceManage.autoGenerate')" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="$t('hangManage.trackName')" name="name" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('hangManage.pleaseInputTrackName') }]">
            <a-input v-model:value.trim="formState.name" :placeholder="$t('hangManage.pleaseInputTrackName')" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="$t('deviceManage.puttNumber')" name="pushRodNumber" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('deviceManage.pleaseInputPuttNumber') }]">
            <a-input-number v-model:value="formState.pushRodNumber" :placeholder="$t('deviceManage.pleaseInputPuttNumber')" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="$t('common.remark')" name="remark" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-textarea v-model:value.trim="formState.remark" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="$t('common.startState')" name="status" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('sysManage.selectEnable') }]">
            <a-radio-group v-model:value="formState.status">
              <a-radio v-for="(item,index) in selectOptions.status" :value="item.value" :key="index">{{item.label}}</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-form>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{ $t('common.cancel') }}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{ $t('common.ok') }}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup name="addDialog">
import {nextTick, ref} from 'vue';
import axios from '@/utils/request'
import { cloneDeep } from 'lodash'
import i18n from '@/locales/index' 
const { t } = i18n.global 
const emits = defineEmits(['ok'])
const labelCol = {  span: 23 }
const wrapperCol = { span: 23 }
let title = ref('')
let visible = ref(false)
let isEdit = ref(false)
let confirmLoading = ref(false)
const selectOptions = ref({})
let recordInfo = ref({})
let formState = ref({})
const formRef = ref()
const edit = async (record, editable) => {
  initModalData(record, editable)
  await nextTick()
  formRef.value.resetFields();
  //设置桥接默认值
  if (!record.id) {
    record.pushRodNumber = 20;
    record.status = 0;
  }
  formState.value = cloneDeep(record)
}
const initModalData = (record, editable) => {
  title.value = t('other.addTrack')
  recordInfo.value = Object.assign({}, record)
  visible.value = true
  isEdit.value = editable
}

const queryParams = (value) => {
  return cloneDeep(value);
}

const handleOk = async () => {
  try {
    const values = await formRef.value.validateFields();
    confirmLoading.value = true
    const res = await axios.postAction('/api/device/master-track/save', queryParams(values))
    if (res.success) {
      emits('ok')
      confirmLoading.value = false
      visible.value = false
    }
  } catch (err) {
    console.log('0000000', err);
  }
  confirmLoading.value = false
};
const handleCancel = () => {
  visible.value = false
  initModalStatus()

}
const initModalStatus = () => {
  confirmLoading.value = false
  formState.value = {}
  formRef.value.resetFields()
}
const initSelectOptions = async (obj) => {
  selectOptions.value = obj
}
defineExpose({
  edit,
  initSelectOptions
})

</script>